// 业务逻辑拆分
// 引入接口
import { getHeadCategoryAPI } from '@/api/category.js'
// 获取路由路径参数
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
export default function useCategoryFn () {
  // 获取路由参数
  const route = useRoute()
  // console.log(route.params.id)
  // 响应式数据
  const topCategoryList = ref([])
  // 给函数设置默认参数
  async function getHeadCategoryList (id = route.params.id) {
    // 调用接口
    // console.log(id)
    const res = await getHeadCategoryAPI({ id })
    topCategoryList.value = res
  }
  getHeadCategoryList()
  // 执行钩子函数-解决路由缓存问题
  onBeforeRouteUpdate((to) => {
    // console.log(to.params.id)
    getHeadCategoryList(to.params.id)
  })
  // watchEffect(async () => {
  //   const res = await getHeadCategoryAPI({ id: route.params.id })
  //   topCategoryList.value = res
  // })
  // watch(
  //   () => route.params.id,
  //   async (newVal, oldVal) => {
  //     console.log(newVal, oldVal)
  //     const res = await getHeadCategoryAPI({ id: newVal })
  //     topCategoryList.value = res
  //   }
  // )
  // 返回响应式数据
  return {
    topCategoryList
  }
}
